.home-view-Box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('@/assets/image/bg.png');
    background-size: 100% 100%;
    font-family: HarmonyOS Sans SC !important;

    .screenBox {
        color: #ffffff;
        // display: flex;

        .title {
            width: 100%;
            height: 40px;
            line-height: 34px;
            display: flex;
            align-items: center;
            background-image: url('@/assets/image/t2.png');
            background-size: 100% 100%;
            padding: 0 32px;
            box-sizing: border-box;
            font-size: 16px;
            color: #ffffff;
            font-weight: 500;
        }

        .screenLeft {
            width: 334px;
            margin: 0 36px 0 20px;
            box-sizing: border-box;
            display: inline-block;
            vertical-align: top;

            .leftTop {
                padding-top: 24px;
                padding-bottom: 33px;

                .childOne {
                    width: 100%;
                    height: 252px;

                    .flexItem {
                        min-height: 212px;
                        padding: 20px;
                        background: rgba(1, 25, 68, 0.6);
                        border-radius: 0px 0px 20px 20px;
                        border: 2px solid #193369;
                        border-top: none;
                        box-sizing: border-box;

                        .item {
                            position: relative;
                            font-size: 12px;
                            font-weight: bold;
                            width: 100%;
                            height: 33px;
                            background-image: url('@/assets/image/line1.png');
                            background-size: 100% 100%;
                            margin-bottom: 12px;
                            display: flex;
                            align-items: center;
                            padding: 0 10px;
                            box-sizing: border-box;

                            >div {
                                span {
                                    font-size: 14px;
                                }
                            }

                            img {
                                display: inline-block;
                                width: 30px;
                                height: 30px;
                                margin-right: 10px;
                            }

                            p {
                                margin: 0px !important;
                            }
                        }

                        .item2 {
                            background-image: url('@/assets/image/line2.png');
                        }

                        .item:last-of-type {
                            margin-bottom: 0px;
                        }
                    }
                }

                .childTwo {
                    margin: 33px 0 0 0;
                    width: 100%;
                    height: 246px;


                    .flexItem {
                        width: 100%;
                        height: 212px;
                        display: flex;
                        align-items: center;
                        position: relative;
                        background: rgba(1, 25, 68, 0.6);
                        border-radius: 0px 0px 20px 20px;
                        border: 2px solid #193369;
                        border-top: none;
                        box-sizing: border-box;
                        justify-content: center;
                        padding-top: 10px;

                        // 环形布局容器样式
                        .ring-layout {
                            position: relative;
                            /* 作为子元素绝对定位的参考 */
                            width: 154px;
                            /* 容器宽度占满父级 */
                            height: 154px;
                            /* 根据需求调整容器高度 */
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            /* 确保子元素围绕中心排列 */
                            border: 3px solid rgba(31, 78, 108, 0.36);
                            border-radius: 50%;
                            box-sizing: border-box;
                           
                            // 环形子元素样式
                            .ring-item {
                                position: absolute;
                                /* 绝对定位围绕中心 */
                                width: 40px;
                                height: 40px;
                                background: linear-gradient(180deg, #9EF6D5 0%, #33C6DF 100%);
                                /* 子元素高度 */
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                text-align: center;
                                border-radius: 50%;
    
                                .item-content {
                                    width: 40px;
                                    height: 40px;
                                    box-sizing: border-box;
                                    padding: 8px;
                                    position: relative;
                                    .infoBox{
                                        position: absolute;
                                        div:first-of-type {
                                            font-weight: bold;
                                            font-size: 12px;
                                            color: #07F7FE;
                                            margin-bottom: 3px;
                                        }
            
                                        div:last-of-type {
                                           font-weight: 400;
                                            font-size: 12px;
                                            color: #F0F6FF;
                                        }
                                    }
                                }
                            }
    
                            // 根据5个子元素均匀分布在边框上
                            .ring-item:nth-of-type(1) {
                                transform: rotate(0deg) translateY(-74px) rotate(0deg);
                                .item-content{
                                    .infoBox{
                                        width:72px;
                                        right: -82px;
                                        top: -10px;
                                    }
                                }
                            }
    
                            .ring-item:nth-of-type(2) {
                                .item-content{
                                    .infoBox{
                                        width:48px;
                                        right: -60px;
                                        top: -10px;
                                    }
                                }
                                transform: rotate(72deg) translateY(-74px) rotate(-72deg);
                            }
    
                            .ring-item:nth-of-type(3) {
                                transform: rotate(132deg) translateY(-74px) rotate(-132deg);
                                .item-content{
                                    .infoBox{
                                        width:72px;
                                        right: -80px;
                                        top: 6px;
                                    }
                                }
                            }
    
                            .ring-item:nth-of-type(4) {
                                transform: rotate(228deg) translateY(-74px) rotate(-228deg);
                                .item-content{
                                    .infoBox{
                                        width:72px;
                                        left: -78px;
                                        top: -15px;
                                    }
                                }
                            }
    
                            .ring-item:nth-of-type(5) {
                                transform: rotate(288deg) translateY(-74px) rotate(-288deg);
                                .item-content{
                                    .infoBox{
                                        width:60px;
                                        left: -60px;
                                        top: -40px;
                                    }
                                }
                            }
                            .cirles {
                                width: 64px;
                                height: 64px;
                                background: #46CFDD;
                                border: 6px solid #013952;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-flow: column;
    
                                div:first-of-type {
                                    font-weight: bold;
                                    font-size: 16px;
                                    color: #000000;
                                }
    
                                div:last-of-type {
                                    font-weight: 400;
                                    font-size: 12px;
                                    color: #000000;
                                }
                            }
                        }
                    }
                }
            }

            .childThird {
                width: 100%;
                // background-image: url('@/assets/image/k3@2x.png');
                // background-size: 100% 100%;

                .flexItem {
                    height: calc(100% - 40px);
                    overflow-y: scroll;
                    border-radius: 0px 0px 20px 20px;
                    border: 2px solid #193369;
                    border-top: none;
                    box-sizing: border-box;
                    padding: 0 12px;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;

                    .listItem {
                        .items {
                            display: inline-block;
                            position: relative;
                            text-align: center;
                            box-sizing: border-box;
                            margin: 0 7px;

                            div:nth-of-type(1) {
                                font-weight: bold;
                                font-size: 14px;
                                margin-bottom: 7px;
                               
                            }

                            .num {
                                font-weight: bold;
                                font-size: 20px;
                                width: 88px;
                                height: 101px;
                            }
                        }

                        .items:nth-of-type(1) {
                            div:nth-of-type(1) {
                                // 新增垂直方向渐变背景（180deg表示从上到下）
                                background: linear-gradient( 180deg, #FFFFFF 0%, #63D8FF 100%);
                                -webkit-background-clip: text;  // 兼容webkit浏览器
                                background-clip: text;          // 标准属性
                                color: transparent;     
                            }
                            .num {
                                background-image: url('@/assets/image/组 47656.png');
                                background-size: 100% 100%;
                            }

                            margin-bottom: 32px;
                        }

                        .items:nth-of-type(2) {
                            div:nth-of-type(1) {
                                // 新增垂直方向渐变背景（180deg表示从上到下）
                                background: linear-gradient( 180deg, #FFFFFF 0%, #3EE6CB 100%);
                                -webkit-background-clip: text;  // 兼容webkit浏览器
                                background-clip: text;          // 标准属性
                                color: transparent;     
                            }
                            .num {
                                background-image: url('@/assets/image/组 47657.png');
                                background-size: 100% 100%;
                            }

                            margin-bottom: 32px;
                        }

                        .items:nth-of-type(3) {
                            div:nth-of-type(1) {
                                // 新增垂直方向渐变背景（180deg表示从上到下）
                                background: linear-gradient( 180deg, #FFFFFF 0%, #FD8900 100%);
                                -webkit-background-clip: text;  // 兼容webkit浏览器
                                background-clip: text;          // 标准属性
                                color: transparent;     
                            }
                            .num {
                                background-image: url('@/assets/image/组 47658.png');
                                background-size: 100% 100%;
                            }

                            margin-bottom: 32px;
                        }

                        .items:nth-of-type(4) {
                            div:nth-of-type(1) {
                                // 新增垂直方向渐变背景（180deg表示从上到下）
                                background: linear-gradient( 180deg, #FFFFFF 0%, #63D8FF 100%);
                                -webkit-background-clip: text;  // 兼容webkit浏览器
                                background-clip: text;          // 标准属性
                                color: transparent;     
                            }
                            .num {
                                background-image: url('@/assets/image/组 47659.png');
                                background-size: 100% 100%;
                            }

                        }

                        .items:nth-of-type(5) {
                            div:nth-of-type(1) {
                                // 新增垂直方向渐变背景（180deg表示从上到下）
                                background: linear-gradient( 180deg, #FFFFFF 0%, #3EE6CB 100%);
                                -webkit-background-clip: text;  // 兼容webkit浏览器
                                background-clip: text;          // 标准属性
                                color: transparent;     
                            }
                            .num {
                                background-image: url('@/assets/image/组 47660.png');
                                background-size: 100% 100%;
                            }

                        }

                        .items:nth-of-type(6) {
                            div:nth-of-type(1) {
                                // 新增垂直方向渐变背景（180deg表示从上到下）
                                background: linear-gradient( 180deg, #FFFFFF 0%, #FD8900 100%);
                                -webkit-background-clip: text;  // 兼容webkit浏览器
                                background-clip: text;          // 标准属性
                                color: transparent;     
                            }
                            .num {
                                background-image: url('@/assets/image/组 47661.png');
                                background-size: 100% 100%;
                            }

                        }
                    }
                }
            }
        }

        .screenCenter {
            width: 1140px;
            display: inline-block;
            vertical-align: top;
            // flex: 1;
            height: 100%;
            position: relative;
            overflow: hidden;


            .centerTop {
                width: 100%;
                height: 664px;
                padding: 27px 37px;
                background-image: url('@/assets/image/dp_bg.png');
                background-size: 100% 100%;
                box-sizing: border-box;
                position: relative;
                margin-top: 24px;

                .childiframe {

                    width: 100%;
                    height: 100%;
                    position: relative;

                    iframe {
                        width: 1920Px !important;
                        height: 1080Px !important;
                        border: none;
                        border-radius: 20px;
                        position: absolute;
                        top: 50%;
                        /* 距离顶部50% */
                        left: 50%;
                        /* 距离左边50% */
                        margin: auto;
                        transform-origin: center center;
                    }
                }


            }

            .centerBot {
                width: 100%;
                height: 273px;
                margin: 0 auto;
                box-sizing: border-box;
                z-index: 9999;
                position: relative;

                .centerBg {
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                    right: 0px;
                    width: 1139px;
                    height: 129px;
                    z-index: -1;
                }

                .carousel-3d-slider {
                    width: 282px !important;
                    height: 246px !important;
                    box-sizing: border-box;
                }

                .carousel-3d-container {
                    margin: 0;
                    z-index: 9999999 !important;
                    // overflow: auto !important;
                }

                .carousel-3d-slide.right-1 {
                    transform: translateX(300px) translateZ(-400px) rotateY(-50deg) scale(1.25) perspective(280px) !important;

                    .slideItem {
                        transform: rotateY(36deg);
                    }
                }

                .carousel-3d-slide.right-2 {
                    transform: translateX(570px) translateZ(-500px) rotateY(-50deg) scale(1.33) perspective(280px) !important;

                    .slideItem {
                        transform: rotateY(40deg);
                    }
                }

                .carousel-3d-slide.left-1 {
                    transform: translateX(-300px) translateZ(-400px) rotateY(50deg) scale(1.25) perspective(280px) !important;

                    .slideItem {
                        transform: rotateY(-30deg);
                    }
                }

                .carousel-3d-slide.left-2 {
                    transform: translateX(-570px) translateZ(-500px) rotateY(50deg) scale(1.33) perspective(280px) !important;

                    .slideItem {
                        transform: rotateY(-40deg);
                    }
                }

                .carousel-3d-slide {
                    background-color: transparent;
                }

                .carousel-3d-slide.current {
                    .slideItem {
                        img {
                            background: #04267B;
                            border: 2px solid #07F7FE;
                        }

                        .name {
                            font-weight: bold;
                            font-size: 24px;
                            color: #07F7FE;
                        }
                    }
                }

                .next {
                    background-image: url('@/assets/image/you.png');
                    background-size: 100% 100%;
                    background-size: cover;
                    top: 50%;
                    // margin-top: 10px !important;
                    right: 20px !important;
                    width: 28px !important;
                    height: 40px !important;
                    cursor: pointer;
                    z-index: 99999;

                    span {
                        display: none;
                    }
                }

                .prev {
                    background-image: url('@/assets/image/zuo.png');
                    background-size: cover;
                    position: absolute;
                    top: 50%;
                    // margin-top: 10px !important;
                    left: 20px !important;
                    width: 28px !important;
                    height: 40px !important;
                    cursor: pointer;
                    z-index: 99999;

                    span {
                        display: none;
                    }
                }

                .slideItem {
                    width: 282px;
                    height: 246px;
                    background-size: 100% 100%;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-flow: column;

                    img {
                        width: 282px;
                        height: 170px;
                        display: inline-block;
                        margin-bottom: 12px;
                        object-fit: cover;
                        border-radius: 10px;
                        background: #011944;
                        border: 2px solid #076F86;
                        box-sizing: border-box;
                        padding: 12px;
                    }

                    .name {
                        font-size: 20px;
                    }
                }
            }
        }

        .screenRight {
            display: inline-block;
            vertical-align: top;
            width: 334px;
            height: 100%;
            margin: 0 20px 0 36px;
            box-sizing: border-box;

            .rightTop {
                padding-top: 24px;
                padding-bottom: 30px;

                .rtChildOne {
                    width: 100%;
                    height: 252px;


                    .flexItem {
                        width: 100%;
                        height: 212px;
                        padding: 22px;
                        background: rgba(1, 25, 68, 0.6);
                        border-radius: 0 0 20px 20px;
                        border: 2px solid #193369;
                        border-top: none;
                        box-sizing: border-box;

                        //全屏按钮
                        video::-webkit-media-controls-fullscreen-button {
                            display: none;
                        }

                        /*隐藏controls中的音量控制*/
                        video.noMuted::-webkit-media-controls-volume-slider,
                        video.noMuted::-webkit-media-controls-mute-button {
                            //隐藏android端video标签自带的音量调节按钮
                            display: none !important;
                        }

                        .flexBox {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            position: relative;
                            border-radius: 10px;

                            .samllVideo {
                                width: 100%;
                                height: 168px;
                            }

                        }

                        img {
                            display: inline-block;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        .fullIcon {
                            height: 40px;
                            background-color: rgba(7, 72, 112, 0.5);
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0 18px;
                            z-index: 999;

                            img {
                                display: inline-block;
                                width: 13px;
                                height: 13px;
                            }
                        }

                        .itemList {
                            width: 120px;
                            height: 145px;
                            background: rgba(0, 0, 0, 0.5);
                            overflow-y: scroll;
                            position: absolute;
                            left: 0;
                            top: 40px;
                            z-index: 999;

                            div {
                                padding: 12px;
                                font-size: 14px;
                                color: #FFFFFF;
                                border-bottom: 1px solid rgba(152, 152, 152, 0.4);
                                white-space: nowrap;
                                /* 确保文本在一行内显示 */
                                overflow: hidden;
                                /* 超出容器部分的文本隐藏 */
                                text-overflow: ellipsis;
                                /* 使用省略号表示被截断的文本 */
                            }
                        }
                    }
                }
            }

            .rightBot {
                overflow: hidden;

                .rtChildTwo {
                    width: 100%;
                    height: 100%;


                    .flexItem {
                        height: 86%;
                        padding: 20px 24px;
                        background: rgba(1, 25, 68, 0.6);
                        border-radius: 0 0 20px 20px;
                        border: 2px solid #193369;
                        border-top: none;
                        box-sizing: border-box;
                        height: calc(100% - 40px);

                        .tipImg {
                            height: 38px;
                            background-image: url('@/assets/image/xiaoxun.png');
                            background-size: 100% 100%;
                        }

                        .swiper-button-prev {
                            width: 20px;
                            height: 20px;
                            background-image: url('@/assets/image/prevbtn.png');
                            background-size: 100% 100%;
                            top: 112px;
                        }

                        .swiper-button-next {
                            width: 20px;
                            height: 20px;
                            background-image: url('@/assets/image/nextbtn.png');
                            background-size: 100% 100%;
                            top: 112px;
                        }

                        .swiper-button-next:after,
                        .swiper-button-prev:after {
                            display: none;
                        }

                        .swiper-slide {
                            width: 100% !important;
                        }

                        .listItem {
                            display: flex;
                            align-items: center;
                            margin: 30px 0;

                            .itemName {
                                font-size: 14px;
                                width: 102px;
                                height: 101px;
                                text-overflow: ellipsis;
                                padding: 8px 0;
                                box-sizing: border-box;
                                background-image: url('@/assets/image/icon1.png');
                                background-size: 100% 100%;
                                margin-right: 24px;
                                text-align: center;
                            }

                            .itemImg {
                                flex: 1;
                                height: 101px;
                                box-sizing: border-box;
                                position: relative;
                                border-radius: 10px;
                                position: relative;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    display: block;
                                    object-fit: cover;
                                    border-radius: 10px;
                                }

                                .fullIcon {
                                    width: 40px;
                                    height: 24px;
                                    background-image: url('@/assets/image/fullIcon.png');
                                    background-size: 100% 100%;
                                    position: absolute;
                                    top: 0px;
                                    right: 0px;
                                }
                            }
                        }
                        .listItem:nth-of-type(2) .itemName{
                            background-image: url('@/assets/image/icon1.png');
                        }
                        .listItem:nth-of-type(3) .itemName{
                            background-image: url('@/assets/image/icon2.png');
                        }
                        .listItem:nth-of-type(4) .itemName{
                            background-image: url('@/assets/image/icon3.png');
                        }
                        .listItem:nth-of-type(5) .itemName{
                            background-image: url('@/assets/image/icon4.png');
                        }
                    }
                }
            }
        }
    }
}